<#import "/admin/_layout.html" as layout>
<@layout.header "运费模板编辑">
    <link rel="stylesheet" href="/static/libs/rc/RegionalChoice.css">
    <style type="text/css">
        .address-div{
            background-color: #fff;
            border: 1px solid #d9d9d9;
            border-radius: 5px;
            width: 550px;
            min-height: 38px;
            max-height: 100px;
            display: flex;
            flex-direction: row;
            overflow-y: scroll;
            overflow-x: hidden;
            flex-wrap: wrap;
            padding: 5px 10px 10px 15px;
        }
    </style>
</@layout.header>
<@layout.body>
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-left">
                        <li class="breadcrumb-item"><a href="#">运费模板</a></li>
                        <li class="breadcrumb-item active">新增</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <section class="content">
        <div class="container-fluid">
            <div class="card card-default">
                <form id="myForm" method="POST" action="/admin/product/postage/doSave" ok="/admin/product/postage/list">
                    <input type="hidden" name="id" value="${(postage.id)!}">
                    <div class="card-body">
                        <div class="form-group">
                            <label class="control-label">运费模板名称</label>
                            <input type="input" name="templateName" class="form-control" value="${(postage.templateName)!}" placeholder="">
                        </div>
                        <div class="form-group">
                            <label class="control-label">发货时间</label>
                            <select class="form-control" name="shippingTime" >
                                <option value="48小时内" <@selectedIf value=(postage?? && postage.shippingTime=='48小时内')/>>48小时内</option>
                                <option value="3天内" <@selectedIf value=(postage?? && postage.shippingTime=='3天内')/>>3天内</option>
                                <option value="7天内" <@selectedIf value=(postage?? && postage.shippingTime=='7天内')/>>7天内</option>
                                <option value="15天内" <@selectedIf value=(postage?? && postage.shippingTime=='15天内')/>>15天内</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="control-label">邮费设置</label>
                            <div class="form-check">
                                <input class="form-check-input" id="template_type1" type="radio" name="templateType" <@checkedIf value=(!postage?? || postage.templateType==1)/> value="1">
                                <label class="form-check-label" for="template_type1" style="cursor: pointer">包邮</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" id="template_type2" type="radio" name="templateType" <@checkedIf value=(postage?? && postage.templateType==2)/> value="2">
                                <label class="form-check-label" for="template_type2" style="cursor: pointer">自定义邮费</label>
                            </div>
                        </div>

                        <div class="form-group" id="custom-all-div" <#if !postage?? || postage.templateType==1> style="display: none"</#if>>

                            <div class="form-group">
                                <label class="control-label">计价方式</label>
                                <div class="form-check">
                                    <input class="form-check-input" id="valuation_type1" type="radio" name="valuationType" <@checkedIf value=(!postage?? || postage.valuationType==1)/> value="1">
                                    <label class="form-check-label" for="valuation_type1" style="cursor: pointer">按件数</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" id="valuation_type2" type="radio" name="valuationType" <@checkedIf value=(postage?? && postage.valuationType==2)/> value="2">
                                    <label class="form-check-label" for="valuation_type2" style="cursor: pointer">按重量</label>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label">运送方式</label>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="postage.set.freightType" checked value="1">
                                    <label class="form-check-label">快递</label>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label">默认运费</label>
                                <table class="table">
                                    <tbody>
                                    <tr>
                                        <input type="hidden" class="selectedareas" name="selectedareas" value="default">
                                        <input type="hidden" name="templateSetId" value="${(defaultTemplate.id)!}">
                                        <td><input type="input" style="width:100px;display: inline" name="startStandards" class="form-control" value="${(defaultTemplate.startStandards)!}" placeholder="" oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')">&nbsp;<span>件内</span></td>
                                        <td><input type="input" style="width:100px;display: inline" name="startFees" class="form-control" value="${(defaultTemplate.startFees)!}" placeholder="" oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')">&nbsp;<span> 元，</span></td>
                                        <td>每增加&nbsp;<input type="input" style="width:100px;display: inline" name="addStandards" class="form-control" value="${(defaultTemplate.addStandards)!}" placeholder="" oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')">&nbsp;<span>件，</span></td>
                                        <td>增加&nbsp;<input type="input" style="width:100px;display: inline" name="addFees" class="form-control" value="${(defaultTemplate.addFees)!}" placeholder="" oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')">&nbsp;<span>元</span></td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>

                            <div class="form-group">
                                <label class="control-label">指定区域运费</label>

                                <div id="custom_freight_div">

                                    <#if templateSetList??>
                                        <#list templateSetList as templateItem>
                                            <div class="address-div-item">
                                                <table class="table">
                                                    <tbody>
                                                    <tr>
                                                        <td colspan="5"><div class="address-div">${(templateItem.areaContent)!}</div><input type="hidden" class="selectedareas" name="selectedareas" value="${(templateItem.areaContent)!}"></td>
                                                    </tr>
                                                    <tr>
                                                        <input type="hidden" name="templateSetId" value="${(templateItem.id)!}">
                                                        <td><input type="input" style="width:100px;display: inline" name="startStandards" class="form-control" value="${(templateItem.startStandards)!}" placeholder="" oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')">&nbsp;<span>件内</span></td>
                                                        <td><input type="input" style="width:100px;display: inline" name="startFees" class="form-control" value="${(templateItem.startFees)!}" placeholder="" oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')">&nbsp;<span> 元，</span></td>
                                                        <td>每增加&nbsp;<input type="input" style="width:100px;display: inline" name="addStandards" class="form-control" value="${(templateItem.addStandards)!}" placeholder="" oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')">&nbsp;<span>件，</span></td>
                                                        <td>增加&nbsp;<input type="input" style="width:100px;display: inline" name="addFees" class="form-control" value="${(templateItem.addFees)!}" placeholder="" oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')">&nbsp;<span>元</span></td>
                                                        <td><a class="del-address-item" href="javascript:void(0)" onclick="delAddressItem(this)">删除</a></td>
                                                    </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </#list>
                                    </#if>

                                </div>

                            </div>

                            <div class="form-group">
                                <label class="control-label"></label>
                                <span id="add-custom-template" style="cursor: pointer"><i class="fa fa-fw fa-plus"></i> 新增指定区域运费</span>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer">
                        <button type="submit" class="btn btn-primary">提交</button>
                    </div>
                </form>
            </div>
        </div>
    </section>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myModalLabel">选择区域</h4>
                </div>
                <div class="modal-body">
                    <div class="test-div"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary btntest1">确定</button>
                </div>
            </div>
        </div>
    </div>

    <script type="text/html" id="custom_template_tpl">

        <div class="address-div-item">
            <table class="table">
                <tbody>
                <tr>
                    <td colspan="5"><div class="address-div"></div><input type="hidden" class="selectedareas" name="selectedareas" value=""></td>
                </tr>
                <tr>
                    <input type="hidden" name="templateSetId" value="">
                    <td><input type="input" style="width:100px;display: inline" name="startStandards" class="form-control" value="" placeholder="" oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')">&nbsp;<span>件内</span></td>
                    <td><input type="input" style="width:100px;display: inline" name="startFees" class="form-control" value="" placeholder="" oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')">&nbsp;<span> 元，</span></td>
                    <td>每增加&nbsp;<input type="input" style="width:100px;display: inline" name="addStandards" class="form-control" value="" placeholder="" oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')">&nbsp;<span>件，</span></td>
                    <td>增加&nbsp;<input type="input" style="width:100px;display: inline" name="addFees" class="form-control" value="" placeholder="" oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')">&nbsp;<span>元</span></td>
                    <td><a class="del-address-item" href="javascript:void(0)" onclick="delAddressItem(this)">删除</a></td>
                </tr>
                </tbody>
            </table>
        </div>

    </script>
</@layout.body>
<@layout.script>
    <script src="/static/libs/rc/RegionalChoice.js"></script>
    <script>
        $(function () {
            submitForm({
                templateName: { required: true}
            },{
                templateName: {required: "请输入运费模板名称"}
            })
        });

        var currentDiv = null;
        var divCheckedMap = {}

        $('input[type=radio][name="templateType"]').click(function(){
            if($(this).val() == 2){
                $("#custom-all-div").show();
            }else{
                $("#custom-all-div").hide();
            }
        })

        function delAddressItem(obj){
            $(obj).parent().parent().parent().parent().remove()
        }

        $("#add-custom-template").click(function(){
            $("#custom_freight_div").append($("#custom_template_tpl").html())
            $(".address-div").click(function () {
                cleanAll()
                currentDiv = $(this)
                if(!currentDiv.attr("id")){
                    currentDiv.attr("id", new Date().getTime())
                }
                var checked = divCheckedMap[currentDiv.attr("id")];
                if(checked) SetChecked(checked)
                $('#myModal').modal('show');
            })
        })

        $(function () {
            //------生成地区
            GetRegionPlug();
            //------选择后确定按钮
            $(".address-div").click(function () {
                cleanAll()
                $('#myModal').modal('show');
            })
            $(".btntest1").click(function () {
                divCheckedMap[currentDiv.attr("id")] = GetChecked();
                var areas = GetChecked().join(",");//已选择的城市名
                currentDiv.html(areas);//显示在页面
                currentDiv.next().val(areas);//存入隐藏的input
                $('#myModal').modal('hide');//完后隐藏模态框
            })
        })
    </script>
</@layout.script>